<template>
  <codemirror
    ref="mirror"
    class="code"
    v-model="mirror.code"
    :options="options"
  ></codemirror>
</template>
<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material-darker.css";
import "codemirror/addon/scroll/simplescrollbars.css";
import "codemirror/addon/scroll/simplescrollbars.js";
import "codemirror/mode/javascript/javascript.js";
export default {
  props: {
    mirror: {
      type: [Object],
      default: () => {
        return {
          code: "",
          readOnly: false,
        };
      },
    },
  },
  computed: {
    options() {
      return {
        readOnly: this.mirror.readOnly,
        lineNumbers: true,
        mode: {
          json: true,
          name: "javascript",
        },
        theme: "material-darker",
        scrollbarStyle: "simple",
      };
    },
  },
  mounted() {
    // JSON.stringify(this.options, null, 4);
  },
  components: {
    codemirror,
  },
};
</script>
<style lang="stylus">
.vue-codemirror {
  height: 100% !important;
}

.CodeMirror {
  height: 100% !important;

  * {
    font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  }

  .CodeMirror-simplescroll-vertical, .CodeMirror-simplescroll-horizontal {
    background-color: #0a0a0a;

    div {
      background-color: #282828;
      border: 1px solid #282828;
    }
  }
}
</style>